<style scoped>
  .line {
    display: block;
    clear: both;
    width: 100%;
    height: 2px;
    background: url(../assets/img/border_img_1.jpg) repeat-x;
  }

  .product_box_1 {
    overflow: hidden;
    clear: both;
    background-color: #fff;
  }

  .product_box_1 li {
    overflow: hidden;
    float: left;
    margin-right: 3px;
    text-align: center;
  }

  .list_cell_11 {
    display: block;
    padding: 5px;
  }

  .list_cell_11 img {
    width: 60px;
    height: 60px;
  }

  .product_box_1 p {
    font-size: 14px;
    line-height: 18px;
  }

  .product_box_1 .weui_cells {
    margin-top: 0px;
  }

  .footer_style_3 {
    height: 54px;
    overflow: hidden;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background: url(../assets/img/point_bg_1.png) repeat;
    line-height: 18px;
    color: #5f6364;
    border-top: 1px solid #e0e0e0;
  }

  .footer_style_3 .btn_style_6 {
    float: right;
    width: 100%;
    font-size: 16px;
  }

  .footer_style_3 .btn_style_6 a, .footer_style_3 .btn_style_6 a:visited {
    display: block;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: #dd2727;
    color: #fff;
  }

  .footer_style_3 .btn_style_6 a:hover {
    display: block;
    background-color: #dd2727;
    color: #fff;
  }

  .footer_style_3 .list_cell_8 {
    float: right;
  }

  .weui-col-60 {
    width: 60%;
    float: left;
  }

  .weui-col-40 {
    width: 40%;
    float: left;
  }

  .list_cell_8 strong {
    overflow: hidden;
    font-size: 14px;
  }

  .list_cell_8 span {
    display: block;
    clear: both;
    font-size: 12px;
    overflow: hidden;
  }
</style>
<template>
  <div>
    <x-header style="background-color:#f7fcf6;border-bottom: 1px solid #e2e2e2;"
              :left-options="{backText:'',showBack: true}">我的订单
    </x-header>
    <div class="line"></div>
    <group>
      <cell style="margin-top:none" :title="address.name+' '+address.phone" value=""
            :inline-desc='address.province+address.city+address.area+address.address' is-link link="/adress"></cell>
    </group>
    <div class="line"></div>
    <group>
      <panel header="商品" :footer="footer" :list="orderList" :type="type" @on-img-error="onImgError"></panel>
    </group>
    <group title="配送方式">
      <cell title="商家自选物流，到付" is-link></cell>
      <cell title="配送信息：工作双休假日均送货" is-link></cell>
    </group>
    <group title="支付方式">
      <cell title="逗米支付" is-link>
        <img slot="icon" style="margin-right:5px;" src="../assets/img/doumi.png" width="30">
      </cell>
    </group>
    <group title="备注">
      <x-textarea title="备注" placeholder="非必填哦" :show-counter="false" :rows="3" v-model="form.memo"></x-textarea>
    </group>
    <div class="weui-row weui-no-gutter footer_style_3">
      <div class="weui-col-60" style="padding:18px 0">合计：{{currMoney}}逗米</div>
      <div class="weui-col-40">
        <div class="btn_style_6"><a @click="submit">提交订单</a></div>
      </div>
    </div>
    <toast v-model="success">{{message}}</toast>
    <toast v-model="error" type="warn">{{errorMessage}}</toast>
  </div>
</template>
<script>
  import {XHeader, Cell, Group, Radio, Toast, Panel, XTextarea} from 'vux'
  import common from '../services/common';
  export default {
    data() {
      return {
        message: "成功",
        errorMessage: "失败",
        success: false,
        error: false,
        state: true,
        goods: [],
        orderList: [],
        currMoney:0,
        form: {
          "goodsId": "",
          "addressId": "",
          "type": 1,
          "goodsCount": 0,
          "memo": "",
        },
        form2: {
          "defaultFlag": 1
        },
        address: {
          name: "未填写",
          phone: "未填写",
          province: "未填写",
          city: "未填写",
          area: "未填写",
          address: "未填写",
        },
      }
    },
    components: {
      XHeader,
      Cell,
      Group,
      Radio,
      Toast,
      Panel,
      XTextarea
    },
    mounted: function () {
      document.title = "我的订单";
      if (common.getStorage("goods")) {
        this.goods = JSON.parse(common.getStorage("goods"));
        this.form.goodsCount = common.getStorage("goodsCount");
        this.currMoney=this.goods.douMi*this.form.goodsCount
        this.orderList.push({
          src: this.goods.logo,
          title: this.goods.name,
          desc: '原价:' + this.goods.douMi + '<span style="margin-left: 20px;color: #dd2727">数量：' + this.form.goodsCount + '</span>',
        })
      } else {
        this.$router.push('/index')
      }
      /*if (common.checkLogin()) {*/
      let currAdress = common.getStorage("currAdress");
      if (currAdress) {
        this.address = JSON.parse(currAdress);
      } else {
        common.post(common.getRequestData("myAddress", this.form2), (res) => {
          if (res.data.responseCode == '0000') {
            this.address = res.data.data;
          } else {
            this.error = true;
            this.errorMessage = res.data.responseMsg;
          }
        }, false);
      }
      /*} else {
       this.message = "正在登陆..."
       this.show1 = true;
       common.setStorage('auth_success_redirect_to', location.href);
       location.replace('http://yirenyiti.gaozhikeji.com/daiyan/wx/entrance?type=' + encodeURIComponent('auth.html?type=0'));
       this.show1 = false;
       }*/
    },
    methods: {
      submit(){
        if (this.state) {
          if (this.address.receiver == "未填写") {
            this.$router.push('/adress')
          } else {
            if (this.address.id) {
              this.form.goodsId = this.goods.id;
              this.form.addressId = this.address.id;
              common.post(common.getRequestData("goodsOrderAdd", this.form), (res) => {
                if (res.data.responseCode == '0000') {
                  common.setStorage("goodsOrder", JSON.stringify(res.data.data));
                  this.$router.push('/pay')
                } else {
                  this.error = true;
                  this.errorMessage = res.data.responseMsg;
                }
              }, false);
            } else {
              this.error = true;
              this.errorMessage = "请选择地址";
            }
          }
        }
      },
    }
  }
</script>
